<template>
  <div class="article-container">
    <h3 v-color="'red'">Article组件</h3>
    <!--文章的标题-->
    <div class="header-box">
      <slot name="title"></slot>
    </div>
    <!--文章的内容-->
    <div class="content-box">
      <!--在封装组件时，为预留的<slot>提供属性对应的值，这种用法叫做“作用域插槽”-->
      <slot name="content" msg="hello vue" :user="userInfo"></slot>
    </div>
    <!--文章的作者-->
    <div class="footer-box">
      <slot name="author"></slot>
    </div>
  </div>

</template>

<script>
export default {
  //首字母要大写
  name: 'Article',
  data() {
    return {
      //用户信息
      userInfo: {
        name: 'yty',
        age: 23
      }
    }
  }
}
</script>

<style lang="less" scoped>
.app-container {
  .header-box {
    background-color: pink;
    height: 150px;
  }
  .content-box {
    background-color: lightblue;
    height: 250px;
  }
  .footer-box {
    background-color: lightsalmon;
    height: 150px;
  }
}
</style>